<template>
    <div class="marketList">
        <div>新品首发</div>
        <ul>
            <li v-for="item in listData" :key="item.id" @click="navToInfo(item.id)">
                <img mode="aspectFill" :src="baseurl+item.coverImage" alt="">
                <div class="goodsName">{{item.subTitle}}</div>
                <div class="goodsInfo">{{item.itemName}}</div>
                <div class="goodsPri">
                    <img src='../../../static/market/dou.png' alt="">
                    <span class="pri">{{item.minEgg}}</span>
                    <span>颗</span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: ['listData', 'baseurl'],
    methods: {
        navToInfo(id) {
            wx.navigateTo({
                url: `../marketDetails/main?id=${id}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.marketList {
    & > div {
        line-height: 100rpx;
        font-size: 40rpx;
        font-weight: 900;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
            margin-bottom: 20rpx;
            flex-basis: 335rpx;
            & > img {
                width: 335rpx;
                height: 335rpx;
                border-radius: 10rpx;
            }
            .goodsName {
                line-height: 40rpx;
                color: #333;
                font-size: 14px;
            }
            .goodsInfo {
                line-height: 40rpx;
                color: #666;
                font-size: 12px;
            }
            .goodsPri {
                display: flex;
                align-items: baseline;
                line-height: 50rpx;
                color: #ca8c5a;
                img {
                    margin-right: 10rpx;
                    width: 22rpx;
                    height: 28rpx;
                }
                .pri {
                    margin-right: 10rpx;
                    font-size: 30rpx;
                }
                & > span:last-child {
                    font-size: 24rpx;
                }
            }
        }
    }
}
</style>
